<!--
 * @Author: your name
 * @Date: 2021-04-20 11:45:27
 * @LastEditTime: 2021-07-27 09:30:56
 * @LastEditors: Please set LastEditors
 * @Description: 工单详情操作记录
 * @FilePath: \dolphin-data-center-front-end\src\pages\owns\detailOperationRecord.vue
-->
<template>
  <a-card class="card-record" :bordered="false" title="操作记录" style="margin-top: 20px">
    <a-timeline>
      <a-timeline-item v-for="(item, index) in operationRecords" :key="index">
        <span v-if="item.createTime">{{ transferDate(item.createTime, 0) }}</span>
        <a-card style=" margin: 12px 0 0 -12px; border-radius: 5px; box-shadow: 0px 0px 2px gray; width:1120px ">
          <a-row type="flex">
            <a-col :span="20">
              <a-card-meta :title="item.createBy">
                <a-avatar slot="avatar" style="backgroundcolor: #3370ff" icon="user" />
                <template slot="description" v-if="!item.systemIf">
                  <p v-if="item.replenishIf">
                    <span v-if="item.insured.name">参保人信息：{{item.insured.name}},</span>
                    <span v-if="['fund_add_error','social_add_error'].includes(item.type)&&item.beginMonth">起缴月份改为{{item.beginMonth}},</span>
                    <span v-if="['fund_cut_error','social_cut_error'].includes(item.type)&&item.endMonth">停缴月份改为{{item.endMonth}},</span>
                    <span v-if="['fund_make_up_error','social_make_up_error'].includes(item.type)&&item.makeUpMonths&&item.makeUpMonths.length">补缴月份改为{{item.makeUpMonths.toString()}},</span>
                  </p>
                  <span v-else>{{item.memo}}</span>
                  <span v-if="item.uploadIf&&item.fileUploadUrls&& item.fileUploadUrls.length" style="display:flex">上传
                    <div class="clearfix">
                      <a-upload :action="get_OSS_config" :default-file-list="item.fileUploadUrls" @preview="onPreview"></a-upload>
                      <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                        <img alt="example" style="width: 100%" :src="previewUrlImg" />
                      </a-modal>
                    </div>
                  </span>
                </template>
                <p slot="description" v-else>{{item.memo}}</p>
              </a-card-meta>
            </a-col>
            <a-col :span="4">
              <span v-if="item.createTime">
                <a-icon type="clock-circle" /> {{ transferDate(item.createTime, 2) }}
              </span>
            </a-col>
          </a-row>
          <a-descriptions class="system-info" title="参保人信息" v-if="systemInfo&&item.systemIf">
            <a-descriptions-item v-for="item in systemInfo" :key="item.txt" :label="item.txt">{{ item.value }}</a-descriptions-item>
          </a-descriptions>
          <a-table v-if="item.systemIf && item.type == 'social_add'" rowKey="id" :columns="columns" :data-source="addCutDataSource" :pagination="false" />
        </a-card>
      </a-timeline-item>
    </a-timeline>
  </a-card>
</template>

<script>
import { get_OSS_config } from '@/services/api';
import { transferDate } from '@/utils/util.js';
export default {
  name: 'detailOperationRecord',
  props: ['operationRecords', 'addCutDataSource', 'systemInfo', 'insured'],
  data () {
    return {
      get_OSS_config,
      columns: [
        {
          title: '项目',
          dataIndex: 'name',
          scopedSlots: { customRender: 'name' },
        },
        {
          title: '养老保险',
          dataIndex: 'endowmentInsurance',
          scopedSlots: { customRender: 'endowmentInsurance' },
        },
        {
          title: '医疗保险',
          dataIndex: 'medicalInsurance',
          scopedSlots: { customRender: 'medicalInsurance' },
        },
        {
          title: '失业保险',
          dataIndex: 'unemploymentInsurance',
          scopedSlots: { customRender: 'unemploymentInsurance' },
        },
        {
          title: '工伤保险',
          dataIndex: 'injuryInsurance',
          scopedSlots: { customRender: 'injuryInsurance' },
        },
        {
          title: '大病医疗',
          dataIndex: 'seriousLlnessiMedical',
          scopedSlots: { customRender: 'seriousLlnessiMedical' },
        },
        {
          title: '补充医疗',
          dataIndex: 'supplementaryMedical',
          scopedSlots: { customRender: 'supplementaryMedical' },
        },
        {
          title: '残障金基数',
          dataIndex: 'disabilityFee',
          scopedSlots: { customRender: 'disabilityFee' },
        },
        {
          title: '取暖费基数',
          dataIndex: 'heatingFee',
          scopedSlots: { customRender: 'heatingFee' },
        },
      ],
      previewUrlImg: '',
      previewVisible: false
    };
  },
  methods: {
    transferDate,
    onPreview (file) {
      const type = file.name.substring(file.name.lastIndexOf('.'))
      if (/\.(jpg|png)$/.test(type)) {
        this.previewUrlImg = file.url;
        this.previewVisible = true;
      } else {
        window.open(file.url, '_blank');
        this.previewUrlImg = '';
      }
    },
    handleCancel () {
      this.previewVisible = false;
    }
  },
};
</script>

<style lang="less" scoped>
/deep/ .system-info .ant-descriptions-title {
  margin-top: 27px !important;
}
.card-record {
  /deep/ .ant-card-body {
    padding: 12px;
  }
  /deep/ .ant-upload-list.ant-upload-list-text {
    display: flex;
    margin-top: -9px;
  }
  /deep/.ant-col.ant-col-4 {
    text-align: right;
  }
}
</style>
